<template>
  <div class="order-page">
    <div class="adress_item" @click="choose_address=true">
      <p class="adress_info">
        <span>{{add_now.userName}}</span> &nbsp;
        <span>{{add_now.userPhone}}</span>
      </p>
      <p class="adress_cont">{{add_now.userAddress}}</p>
      <i class="icon-keyboard_arrow_right"></i>
    </div>
    <cell title="支付方式" value="货到付款" is-link></cell>
    <div class="goods_item" v-for="item in goods_list">
      <flexbox :gutter="0" wrap="wrap">
        <flexbox-item :span="1/4" class="good_img">
          <img :src="item.icon" alt="" style="width:100%">
        </flexbox-item>
        <flexbox-item :span="3/4" class="good_cont">
          <p class="name">{{ item.name }}</p>
          <p class="desc">{{ item.description }}</p>
          <p class="price">{{ item.price | price_func}}</p>
        </flexbox-item>
        <span class="good_num">x{{ item.count }}</span>
      </flexbox>
    </div>
    <x-input title="备注" placeholder="我们会尽量满足您的需求" v-model="order_form.orderRemarks"></x-input>
    <cell title="商品总价">￥{{total_price}}</cell>
    <x-button :show-loading="loading" type="primary" class="sub_btn" @click.native="sub_order()">提交订单（应付{{ total_price | price_func }}）</x-button>
    <x-dialog v-model="choose_address" hide-on-blur :dialog-style="{width: '95%', height: '50%', 'background-color': '#fff'}">
      <h3 style="margin:10px">地址选择</h3>
      <div class="adress_item" v-for="item in addlist" @click="choos_add(item)">
        <cell :title="item.userName" :value="item.userPhone"></cell>
        <cell primary="content" :value="item.userAddress"></cell>
      </div>
    </x-dialog>
  </div>
</template>

<script>
import g from "../../common/js/http.js"
import c from "../../common/js/order.js"
import {
  Cell,
  Group,
  CheckIcon,
  Flexbox,
  FlexboxItem,
  XInput,
  XButton,
  XDialog
} from "vux"
import { setInterval } from "timers"
export default {
  components: {
    Group,
    Cell,
    CheckIcon,
    Flexbox,
    FlexboxItem,
    XInput,
    XButton,
    XDialog
  },
  data() {
    return {
      demo1: false,
      loading: false,
      goods_list: "",
      total_price: "",
      choose_address: false,
      addlist: "",
      add_now: "",
      order_form:{
        orderRemarks:'无备注',
        payType:0 ,//0:货到付款 1:在线支付
        payFrom:0 //0无 1:支付宝，2：微信
      }
    }
  },
  created() {
    this.goods_list = c.order_goods_list
    this.total_price = c.order_peice
    this.getData()
  },
  filters: {
    price_func(val) {
      return "￥" + val.toFixed(2)
    }
  },
  watch: {
    $route(to, from) {
      this.getOrderData()
    }
  },
  methods: {
    getData() {
      var _this = this
      g.post_func("/api/v1/staff/adress_list", {}, function(data) {
        if (data.code == "401") {
          alert("登录过期 请重新登录")
          _this.$router.push("/login")
        } else if (data.code == "200") {
          _this.addlist = data.data
          _this.addlist.forEach(v => {
            if (v.isDefault == 0) {
              v.isDefault = false
            } else {
              v.isDefault = true
              _this.add_now = v
            }
          })
        }
      })
    },
    choos_add(item) {
      this.add_now = item
      this.choose_address = false
    },
    getOrderData() {
      this.goods_list = c.order_goods_list
      this.total_price = c.order_peice
    },
    sub_order() {
      var _this = this
      var shopid = localStorage.getItem("shopid")
      var staffId = localStorage.getItem("user")

      if (shopid == "" || shopid == "undefined" || staffId=="") {
        alert("参数错误")
      }
      var addNow = _this.add_now
      var areaIdPath = _this.add_now
      var order_form =  _this.order_form
      if(_this.total_price=='' || addNow.userName=='' || addNow.userAddress=='' || addNow.userPhone=='' || addNow.areaIdPath == ''){
        alert('参数错误，请从新创建订单！')
        return
      }
      var parameters = {
        goodsMoney: _this.total_price * 100, //商品总金额
        realTotalMoney:  _this.total_price * 100, //实际订单总金额
        payType: order_form.payType, //支付方式  0:货到付款 1:在线支付
        payFrom: order_form.payFrom, //支付来源  1:支付宝，2：微信
        userName: addNow.userName, //收货人名称
        userAddress: addNow.userAddress, //收件人地址
        userPhone:  addNow.userPhone,//收件人手机
        orderRemarks: order_form.orderRemarks, //订单备注
        areaIdPath: addNow.areaIdPath, //区域Id路径 省级id_市级id_县级Id_ 例如:110000_110100_110101_
        shopId: shopid, //商户id
        staff_id:staffId, //顾客id
        goods_arr:_this.goods_list,
        goods_num:_this.goods_list.length 
      }
      console.log(_this.goods_list)
      g.post_func('/api/v1/staff/creat_order',parameters,function(data){
        if(data.code==200 && order_form.payType==0){
          _this.$router.push('/order_success')
        }else{
          alert('网络错误，请稍后重试')
        }
      })
    }
  }
}
</script>
<style scoped>
.adress_item {
  position: relative;
  padding: 15px 0px;
  background: #e1e1e1;
  margin: 10px 0;
}
.sub_btn {
  width: 95%;
  font-size: 98%;
  margin-top: 20px;
}
.order-page {
  font-size: 96% !important;
}
.adress_item {
  position: relative;
  padding: 15px 0px;
  background: #eee;
  margin: 10px 0;
}
.adress_cont {
  padding: 10px 0 10px 30px;
  color: #999;
  width: 86%;
  background-image: url("../../../static/icon/local.png");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 9px 8px;
}
.adress_info {
  padding-left: 15px;
}
.icon-keyboard_arrow_right {
  position: absolute;
  font-size: 10px;
  right: 12px;
  top: 34%;
}
.icon-keyboard_arrow_right:before {
  content: "\E909";
  font-size: 28px;
  color: #999;
}
.goods_item {
  position: relative;
  margin: 10px 0;
}
.good_img * {
  padding-left: 10px;
}
.good_cont * {
  padding-left: 20px;
  margin: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.good_cont .name {
  color: #3f3f3f;
}
.good_cont .desc {
  color: #808080;
  font-size: 92%;
}
.good_cont .price {
  color: #f80e17;
}
.good_num {
  position: absolute;
  bottom: 8px;
  right: 18px;
  color: #474747;
}
</style>











